<!--
 * @文件名称：  viewerJs.vue
 * @包路径：   viewerJs
 * @版权所有： viewerJs (C) 2020
 *
 * @文件描述:  viewerJs
 * @版本:       viewerJs
 * @作者        zhangshumiao
 * @创建时间    2020/5/12 16:40
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <el-row>
<!--    <viewer :image="imageList" >-->
<!--&lt;!&ndash;      <el-row>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-col :span="12" v-for="(item, index) in imageList" :key="index">&ndash;&gt;-->
<!--&lt;!&ndash;          <div >&ndash;&gt;-->
<!--            <img v-for="(item, index) in imageList" :key="index" :src="item.src" alt="">-->
<!--&lt;!&ndash;            <p>{{item.src.slice(6, 12)}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-row>&ndash;&gt;-->
<!--    </viewer>-->
    <div v-for="(item, index) in dataNum" :key="index" style="display: inline-block; margin-left: 10px;">
      <span @click="nextClick(index)" :class="{bgColor: (dataNumIndex === index)}" style="padding: 6px;">{{item}}</span>
    </div>
  </el-row>
</template>

<script>
// import viewer from 'v-viewer'
export default {
  name: 'viewerJs',
  data() {
    return {
      imageList: [
        {src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg'},
        {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg'},
        {src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg'},
        {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg'},
      ],
      dataNum: ['内容', '丫丫', '哦哦', '噢噢', '啊啊'],
      dataNumIndex: ''
    }
  },
  mounted() {
    console.log(this.dataNumIndex);
  },
  methods: {
    nextClick(index) {
      this.dataNumIndex = index;
      console.log(this.dataNumIndex);
    }
  }
}
</script>

<style>
  .bgColor{
    background: #dddddd;
    border-radius: 10%;
  }
</style>
